<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .router-link-active {
      color: red;
    }

    .router-link-exact-active {
      color: orangered;
    }
  </style>
</head>

<body>
  <div id="app">
    <router-link to="/index" tag="button">首页</router-link>
    <router-link to="/home" tag="button">home</router-link>
    <router-link to="/about" tag="button">about</router-link>
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
  <!-- 路由模板 -->
  <template id="index">
    <div>
      <h3>我是index页</h3>
      <router-link to="/index/register" tag="button">register</router-link>
      <router-view></router-view>
    </div>
  </template>
  <template id="home">
    <div>
      <h3>我是home页</h3>
      <button @click="toBtn">奇怪的按钮</button>
      <router-view></router-view>
    </div>
  </template>
  <template id="about">
    <div>
      <h3>我是about页</h3>
      <button @click="toBtn">奇怪的按钮</button>
      <router-view></router-view>
    </div>
  </template>
  <template id="login">
    <div>
      <h2>登录页</h2>
      <h3 style="color: orangered;">八嘎!,为什么不找我登录啊？</h3>
      <button @click="toLogin">login</button>
    </div>
  </template>
  <template id="register">
    <div>
      <h3 style="color: orangered;">八嘎!,不注册怎么登录啊？</h3>
    </div>
  </template>
  <template id="btn">
    <div>
      <h3 style="color: orangered;">八嘎!,不要奇怪的按钮啊！！！(⊙o⊙)？</h3>
    </div>
  </template>
  <!-- 路由模板 -->
  <script src="../vue.js"></script>
  <script src="../vue-router.js"></script>
  <script>
    //避免重复点击路由产生的错误，此错误不影响程序的运行
    const originalPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)
    }
    //路由组件
    const index = {
      template: '#index',
    }
    const home = {
      template: '#home',
      methods: {
        toBtn() {
          console.log(this);
          this.$router.push({
            path: '/home/btn'
          })
        }
      }
    }
    const about = {
      template: '#about',
      methods: {
        toBtn() {
          this.$router.push({
            path: '/about/btn'
          })
        }
      },
      beforeRouteEnter(to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        if(confirm('喂！这里可是18+的内容啊！U<(￣ c￣)y▂ξ')){
          next()
        }
      },
      beforeRouteUpdate(to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave(to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        if(confirm('你真的要退出吗？ヾ(•ω•`)o')){
          next()
        }
      }
    }
    const login = {
      template: '#login',
      methods: {
        toLogin() {
          localStorage.setItem('token', 'asdsadsad461635463');
          setTimeout(() => {
            if (this.$route.query.from) {
              this.$router.replace(this.$route.query.from)
            } else {
              this.$router.replace('/index')
            }
          }, 1000)
        },
      }
    }
    const register = {
      template: '#register',
      mounted() {
        localStorage.removeItem('token');
      }
    }
    const btn = { template: '#btn' }
    //路由规则  在这里可以定义路由独享守卫
    const routes = [
      {
        path: '/',
        redirect: '/index'
      },
      {
        path: '/index',
        component: index,
        children: [
          {
            path: '/index/register',
            component: register,
          }
        ]
      },
      {
        path: '/home',
        component: home,
        alias: '/solo',
        children: [
          {
            path: '/home/btn',
            component: btn
          }
        ]
      },
      {
        path: '/about',
        component: about,
        children: [
          {
            path: '/about/btn',
            component: btn
          }
        ],
      },
      {
        path: '/login',
        component: login,
      }
    ]

    //创建路由实例  注入规则
    const router = new VueRouter({
      routes,
      mode: 'hash'  //路由模式hash和history， 默认是hash
    });
    const app = new Vue({
      el: '#app',
      //路由实例挂载到vue实例上
      router,
      methods: {
      }
    })
  </script>
</body>

</html>